<template>
    <div style="padding:10px">
    <el-form :inline="true">
      <el-form-item>
        <el-button
          type="primary"
          @click="add"
          icon="delete"
        >增加</el-button>
      </el-form-item>
    </el-form>
    <el-table
      style="width:100%"
      :data="list"
      v-loading.body="listLoading"
      element-loading-text="Loading"
      border
    > 
    
      <DataListItem  v-bind:key="$index"  v-for="(item,$index) in cols" :column="item" />
    
      <el-table-column
        align="center"
        label="操作"
        width="230"
      >
        <template slot-scope="scope">
          <el-button
            size="small"
            @click="edit(scope.$index, scope.row)"
          >编辑
          </el-button>
          <el-button
            size="small"
            @click="remove(scope.$index, scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import Vue from "vue";

export default {

  props: ["cols", "cate"],
  components:{
      'DataListItem':{
          name:'DataListItem',
          template:`<el-table-column :label='column.label' :prop='column.prop' align="center">
          
          <DataListItem :key="$index" v-for="(item,$index) in column.data?column.data:[]" :column="item" />
          </el-table-column>
          `,
          props:['column']
      }
  },
  data: function() {
    return {
      listLoading:false,
      list:[]
    };
  },
  created() {
    //
    debugger
    console.log(this.cols);
    //
  },
  methods: {
    add() {},
    remove(index,row){

    },
    edit(index,row){

    }
  }
};
</script>